<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery标单验证</title>
        <style>
            .star{
                color: red;
            }
            .dt{
                padding-top:10px;
            }
        </style>
        <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
            $("form :input.required").each(function(){
                var $requirde = $("<strong class='star'>*</strong>");
                $(this).parent().append($requirde);
            })
            $("form :input").append(function(){
                if($(this).is("#username")){
                        if($(this).val() == ""){
                            alert("用户名不能为空！");
                        }
                    }
                    if($(this).is("#pwd")){
                        if($(this).val() == " "){
                            alert("密码不能为空！");
                        }
                        if(this.value.length < 8){
                            alert("密码不能小于8位，请重新输入！");
                        }
                    }
            })
        })
        </script> 不 
    </head>
    <body>
        <form>
            <h3 align="center">用户注册</h3>
        <div class="dt">
            用户名：<input type="text" id="username" name="username" size=20 class="required" />
        </div>
        <div class="dt">
            密&nbsp;&nbsp;&nbsp;码：<input type="password" id="pwd" name="pwd" size=20 class="required" />
        </div>
        <div class="dt">
            电&nbsp;&nbsp;&nbsp;话：<input type="text" id="phone" name="phone" size=11 maxlength="11" />
        </div>
        <div class="dt">
            地&nbsp;&nbsp;&nbsp;址：<input type="text" id="address" name="address" size=20 maxlength="20" />
        </div>
        <div class="dt">
            <input type="submit" name="sub" value="注册" />
        </div>
        </form>
    </body>    
</html>